<template>
    <div class="app-container home" v-loading="loading">
        <el-row :gutter="24">
            <el-col :span="24">
                <el-row :gutter="24">
                   
                    <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-info" @click="toModule('/inspect/inventoryManagement','0')">
                            <div class="card-count">{{NCRData.DAIFAQIJIANYAN}}</div>
                            <div class="card-content">{{$t('homePage.pendingStartInspection')}}</div>
                        </div>
                    </el-col>
                    <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-info" @click="toModule('/inspect/incoming','6')">
                            <div class="card-count">{{NCRData.TODAYDAIJIAN}}</div>
                            <div class="card-content">{{$t('homePage.pendingInspection')}}</div>
                        </div>
                    </el-col>
                    <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-warning" @click="toModule('/inspect/incoming','1','exceedTimeStauts')">
                            <div class="card-count">{{overDuceData.jiJiangChaoQi}}</div>
                            <div class="card-content">{{$t('homePage.almostOverdue')}}</div>
                        </div>
                    </el-col>
                    <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-error" @click="toModule('/inspect/incoming','0','exceedTimeStauts')">
                            <div class="card-count">{{overDuceData.yiChaoQi}}</div>
                            <div class="card-content">{{$t('homePage.delayed')}}</div>
                        </div>
                    </el-col>
                    
                    <el-col :lg="4" :md="4" :sm="6" :xs="8" v-if="false">
                        <div class="summary-card summary-info" @click="toModule('/inspect/inventoryInspection','0')">
                            <div class="card-count">{{NCRData.KUCUN}}</div>
                            <div class="card-content">{{$t('homePage.inventoryInspection')}}</div>
                        </div>
                    </el-col>
                     
                    <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-info" @click="toModule('/inspect/incoming','2','ncr')">
                            <div class="card-count">{{NCRData.NCRCONDUCT}}</div>
                            <div class="card-content">{{$t('homePage.mrbInApproval')}}</div>
                        </div>
                    </el-col>
                    <!-- <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-info" @click="toModule('/inspectionPlan')">
                            <div class="card-img"><img src="@/assets/images/home/plan.png" alt="" class="menu-img" /></div>
                            <div class="card-content">{{$t('homePage.inspectionPlan')}}</div>
                        </div>
                    </el-col>
                    <el-col :lg="4" :md="4" :sm="6" :xs="8">
                        <div class="summary-card summary-info" @click="toModule('/inspectionPlan')">
                            <div class="card-img"><img src="@/assets/images/home/plan.png" alt="" class="menu-img" /></div>
                            <div class="card-content">{{$t('homePage.inspectionPlan')}}</div>
                        </div>
                    </el-col> -->
                    <el-col :lg="3" :md="4" :sm="6" :xs="8">
                        <div class="menu-card" @click="toModule('/inspectionPlan')">
                            <div class="card-img"><img src="@/assets/images/home/plan.png" alt="" class="menu-img" /></div>
                            <div class="card-short">{{$t('homePage.inspectionPlan')}}</div>
                        </div>
                    </el-col>
                    <el-col :lg="3" :md="4" :sm="6" :xs="8">
                        <div class="menu-card" @click="toModule('/inventoryManagement/ncrlist')">
                            <div class="card-img"><img src="@/assets/images/home/NCR.png" alt="" class="menu-img" /></div>
                            <div class="card-short">{{$t('homePage.MRBReviewForm')}}</div>
                        </div>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="24" style="margin-top: 10px">
                    <el-col :span="8">
                        <div class="chart-card">
                            <problem-chart ref="problemCount" :overDuceData="overDuceData" height="300px" width="100%" />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="chart-card">
                            <incoming-chart ref="incomingCount" :overDuceData="incomingdata" height="300px" width="100%" />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="chart-card">
                            <close-project-chart :NCRData="NCRData" ref="problemCount" height="300px" width="100%" />
                        </div>
                    </el-col>
                </el-row> -->
                <div class="home-list">
                    <div class="container-header">
                        <div :class="
                activeName === 'pending'
                  ? 'header-left title-current'
                  : 'header-left'
              " @click="changeTab('pending')">
                            {{$t('homePage.pendingTask')}}
                        </div>
                        <div :class="
                activeName === 'success'
                  ? 'header-left title-current'
                  : 'header-left'
              " @click="changeTab('success')">
                            {{$t('homePage.completedTask')}}
                        </div>
                    </div>
                    <div class="container-table" v-show="activeName == 'pending'">
                        <el-table :show-header="false" v-loading="loading" :data="pendingList" stripe :row-class-name="tableRowClassName">
                            <el-table-column width="140" align="left" prop="createTime" />
                            <el-table-column minWidth="160" align="left" prop="newsContent" :show-overflow-tooltip="true" />
                            <el-table-column :label="$t('public.opera')" fixed="right" align="center" width="100">
                                <template slot-scope="scope">
                                    <div class="action-wrap">
                                        <a style="color:#1890FF;line-height: 35px;" @click="deal(scope)">{{$t('homePage.deal')}}</a>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="needDealtList" layout="total, sizes, prev, pager, next, jumper" />
                    </div>
                    <div class="container-table" v-show="activeName == 'success'">
                        <el-table :show-header="false" v-loading="successLoading" :data="processList" :row-class-name="tableRowClassName">
                            <el-table-column width="140" align="left" prop="createTime" />
                            <el-table-column minWidth="160" align="left" prop="newsContent" :show-overflow-tooltip="true" />
                            <el-table-column :label="$t('public.opera')" fixed="right" align="center" width="100">
                                <template slot-scope="scope">
                                    <div class="action-wrap">
                                        <a style="color:#1890FF;line-height: 35px;" @click="deal(scope,'','history')">{{$t('home.view')}}</a>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="processedList" layout="total, sizes, prev, pager, next, jumper" />
                    </div>
                </div>
                <!-- <div class="menu-list">
                    <div class="container-header">
                        <div class="header-left title-current">
                            {{$t('homePage.shortcutMenu')}}
                        </div>
                    </div>

                    <el-row :gutter="24" style="float:left;width:100%;margin-top:10px">
                        
                        <el-col :lg="3" :md="4" :sm="6" :xs="6">
                            <div class="menu-card" @click="toModule('/inspectionPlan')">
                                <div class="card-img"><img src="@/assets/images/home/plan.png" alt="" class="menu-img" /></div>
                                <div class="card-short">{{$t('homePage.inspectionPlan')}}</div>
                            </div>
                        </el-col>
                        <el-col :lg="3" :md="4" :sm="6" :xs="6">
                            <div class="menu-card" @click="toModule('/inventoryManagement/ncrlist')">
                                <div class="card-img"><img src="@/assets/images/home/NCR.png" alt="" class="menu-img" /></div>
                                <div class="card-short">{{$t('homePage.MRBReviewForm')}}</div>
                            </div>
                        </el-col>
                        

                    </el-row>
                </div> -->
            </el-col>
            <!-- <el-col :span="5" style="height:100%">
                <div class="grid-message">
                    <div class="container-header">
                        <div class="header-left title-current">
                            消息通知
                        </div>
                        <div class="header-right" @mouseover="hoverClear = true" @mouseleave="hoverClear = false" @click="clearMessage">
                            <img :src="hoverClear ? deleteImg:defaultImg" alt="" class="clear-img" />
                            <span class="clear-message">清空通知</span>
                        </div>
                    </div>

                    <div class="message-list" v-loading="messageLoading">
                        <ul>
                            <li v-for="(item,index) in messageList" :key="index" @click="clearOne(item)">
                                <div class="message-description">
                                    {{item.newsContent}}
                                </div>
                                <div class="message-datetime">
                                    {{item.createTime}}
                                </div>
                            </li>

                            <li v-if="showMoreButtons">
                                <div class="show-more" @click="showMore">
                                    加载更多
                                </div>
                            </li>
                            <li v-if="!showMoreButtons&&messageList.length>15">
                                <div class="show-more">
                                    没有更多了
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col> -->
        </el-row>
    </div>
</template>

<script>
import ProblemChart from '@/views/home/echarts/problemChart'
import incomingChart from '@/views/home/echarts/incomingChart'
import CloseProjectChart from '@/views/home/echarts/closeProjectChart'
import defaultImg from '@/assets/images/home/delete-default.png'
import deleteImg from '@/assets/images/home/delete.png'
import {
  clearMessage,
  listMessage,
  needDealtList,
  processedList,
  selectCountNcr,
  selectOverdueCount,
  selectIncomingcountAPI
  
} from '@/api/home/home'

export default {
    name: 'Index',
    components: { ProblemChart, CloseProjectChart,incomingChart },
    data() {
        return {
            // 版本号
            version: '3.2.0',
            defaultImg: defaultImg,
            messageLoading: false,
            successLoading: false,
            NCRData: {},
            overDuceData: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
            },
            pendingList: [],
            processList: [],
            deleteImg: deleteImg,
            activeName: 'pending',
            loading: false,
            total: 10,
            loading: false,
            hoverClear: false,
            messageList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 20,
            },
            messageParams: {
                pageNum: 1,
                pageSize: 20,
            },
            showMoreButtons: false,
            incomingdata:{}
        }
    },
    created() {
        this.selectCountNcr()
        this.selectOverdueCount()
        this.selectIncomingCount()
        this.needDealtList()
        this.listMessage()
    },
    activated() {
        this.selectCountNcr()
        this.selectOverdueCount()
        this.selectIncomingCount()
        this.needDealtList()
        this.listMessage()
    },
    methods: {
        toModule(url, status, exceedTimeStauts) {
            if (exceedTimeStauts === 'ncr') {
                this.$router.push({
                    path: url,
                    query: {
                        status: status,
                        ncr: exceedTimeStauts,
                    },
                })
            } else {
                this.$router.push({
                    path: url,
                    query: exceedTimeStauts
                        ? { exceedTimeStauts: status }
                        : {
                              status: status,
                          },
                })
            }
        },
        clearOne(row) {
            clearMessage(row.id).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess('操作成功!')
                    this.listMessage()
                }
            })
        },
        clearMessage() {
            let ids = []
            this.messageList.forEach((io) => {
                ids.push(io.id)
            })
            if (ids.length === 0) {
                return
            }
            clearMessage(ids).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess('操作成功!')
                    this.listMessage()
                }
            })
        },
        listMessage() {
            this.messageLoading = true
            listMessage(this.messageParams).then((res) => {
                this.messageList = res.rows
                if (res.total > this.messageParams.pageSize) {
                    this.showMoreButtons = true
                } else {
                    this.showMoreButtons = false
                }
                this.messageLoading = false
            })
        },
        deal(scope, status, type) {
            let moduleName = scope.row.functionModule.split('：')
            console.log(moduleName[1])
            switch (moduleName[1]) {
                case '待检任务':
                    this.$router.push({
                        path: '/inspect/inventoryManagement',
                        query: {
                            uniqueId: scope.row.uniqueId,
                        },
                    })
                    break
                case '检验标准':
                    this.$router.push({
                        path: '/inspectionPlan',
                        query: {
                            uniqueId: scope.row.uniqueId,
                        },
                    })
                    break
                case '来料检验':
                    this.$router.push({
                        path: '/inspect/incoming',
                        query: {
                            uniqueId: scope.row.uniqueId,
                            status,
                            type: type,
                        },
                    })
                    break
                case 'MRB清单':
                    this.$router.push({
                        path: '/inventoryManagement/ncrlist',
                        query: {
                            uniqueId: scope.row.businessId,
                            status,
                            type: type,
                        },
                    })
                    break
            }
        },
        changeTab(tabType) {
            this.activeName = tabType
            this.queryParams = {
                pageNum: 1,
                pageSize: 20,
            }
            if (tabType === 'pending') {
                this.needDealtList()
            } else {
                this.processedList()
            }
        },
        needDealtList() {
            needDealtList(this.queryParams).then((res) => {
                this.pendingList = res.rows
                this.total = res.total
            })
        },
        processedList() {
            this.successLoading = true
            processedList(this.queryParams).then((res) => {
                this.processList = res.rows
                this.total = res.total
                this.successLoading = false
            })
        },
        selectCountNcr() {
            this.loading = true
            selectCountNcr().then((res) => {
                this.NCRData = res.data
                this.loading = false
            })
        },
        selectOverdueCount() {
            selectOverdueCount().then((res) => {
                this.overDuceData = res.data
            })
        },
        // 检验单任务数
        selectIncomingCount() {
            selectIncomingcountAPI().then((res) => {
                this.incomingdata = res.data
            })
        },
        showMore() {
            this.messageParams.pageSize += 10
            this.listMessage()
        },
        goTarget(href) {
            window.open(href, '_blank')
        },
        tableRowClassName({ row, column }) {
            console.log('row.status====>', row.status)
            // let value;
            if (row.status === '未开始') {
                return ''
            }
            if (row.status === '超时') {
                return 'error-bg'
            }
            if (row.status === '即将到期') {
                return 'warning-bg'
            }

            return ''
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-table .default-bg {
    background-color: rgba(83, 88, 98, 0.08) !important;
}
::v-deep .el-table .error-bg {
    background-color: rgba(235, 86, 72, 0.08) !important;
}
::v-deep .el-table .warning-bg {
    background-color: rgba(227, 165, 11, 0.06) !important;
}
.app-container {
    padding: 0;
}
.home {
    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }
    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }
    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 100;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
}
.chart-card {
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.summary-card {
    margin-top: 5px;
    transition: all 0.6s; 
    // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    height: 98px;
    padding-top: 15px;
    padding-left: 20px;
    cursor: pointer;
}
.summary-card:hover {
    transform: scale(1.1);
}
.card-count {
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 32px;
    color: #fff;
    line-height: 30px;
}

.card-content {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 15px;
    margin-top: 8px;
}
.card-short {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #606266;
    line-height: 15px;
    margin-top: 8px;
}
.summary-success:hover {
    background: rgba(32, 176, 159, 0.06);
    .card-count {
        color: #20b09f;
    }
}
.summary-warning {
    background: url('~@/assets/images/home/bg2.png') no-repeat;
    background-size: cover;
}
.summary-warning:hover {
    background: url('~@/assets/images/home/bg2_hover.png') no-repeat;
    background-size: cover;
}
.summary-error {
    background: url('~@/assets/images/home/bg3.png') no-repeat;
    background-size: cover;
}
.summary-error:hover {
    background: url('~@/assets/images/home/bg3_hover.png') no-repeat;
    background-size: cover;
}
.summary-info {
    background: url('~@/assets/images/home/bg1.png') no-repeat;
    background-size: cover;
}
.summary-info:hover {
    background: url('~@/assets/images/home/bg1_hover.png') no-repeat;
    background-size: cover;
}
.home-list {
    float: left;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 20px;
}
.menu-list {
    float: left;
    height: 146px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 20px;
    width: 100%;
}
.container-header {
    width: 100%;
    border-bottom: 1px solid #ededf2;
    float: left;
}
.header-left {
    float: left;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
    display: flex;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
}
.title-current {
    border-bottom: 2px solid #0b7be3;
}
.container-table {
    float: left;
    margin-top: 6px;
    width: 100%;
}
.menu-img {
    width: 40px;
    height: 24px;
}
.menu-card {
    height: 64px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.6s; 
}
.menu-card:hover {
    transform: scale(1.1);
}
.grid-message {
    padding: 10px 20px;
    float: left;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.message-list {
    float: left;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
}
.message-list ul {
    max-height: calc(100vh - 200px);
    overflow: auto;
}
.message-list ul li {
    line-height: 36px;
    border: 1px solid #ededf2;
    border-bottom: 0px;
    // margin:0px 0px -1px 0px ;
}
.message-list ul li:last-child {
    border-bottom: 1px solid #ededf2;
    // margin:0px 0px -1px 0px ;
}

::v-deep .message-list ul li:hover {
    background: rgba(11, 123, 227, 0.08);
}
.message-description {
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
}
.message-datetime {
    padding-left: 11px;
    margin-top: 2px;
    color: #a5a5aa;
    font-size: 12px;
}
.show-more {
    display: flex;
    justify-content: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.show-more:hover {
    color: rgb(24, 144, 255);
}

.header-right {
    margin-top: 10px;
    float: right;
}
.header-right:hover {
    color: #eb5648;
    cursor: pointer;
}
.clear-img {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}
</style>

